<template>
	<view class="index">
		<view class="top-wrapper" :style="{'height': topHeight + 'px'}">
			<view class="back-wrapper" @click="goBack"
				:style="{'margin-top': menuButtonInfo.top + 'px','height': menuButtonInfo.height + 'px'}">
				<uni-icons class="icon" type="left" size="24" color="#ffffff"></uni-icons>
			</view>
			<view class="search-wrapper"
				:style="{'margin-top': menuButtonInfo.top + 'px','height': menuButtonInfo.height + 'px'}">
				<input type="text" disabled @tap="goSearch" v-model="keywords" placeholder="输入关键字搜索商品" class="input" />
				<image src="https://cdpresources.hobon.cc/procurement-mini-program/static/search.png" class="icon"
					mode="widthFix"></image>
			</view>
			<view class="menuButtonInfo" :style="{'width': menuButtonInfo.width + 'px'}">

			</view>
		</view>

		<scroll-view scroll-x :scroll-left="categoryScrollLeft" scroll-with-animation style="background-color: #fff;">
			<view class="categoryi-wrapper">
				<view class="item" v-for="(item,index) in categoryList" :key="index" @click="selectCategoryi(index)"
					:class="{'current': categoryiIndex === index}">
					<image :src="item.categoryImage" class="icon" mode="aspectFill"></image>
					<view class="name">
						{{ item.name }}
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="content-wrapper">
			<view class="left-wrapper" :style="{'height':contentHeight + 'px'}">
				<view class="item" v-for="(item,index) in categoryIiList" :key="index" @click="selectCategoryIi(index)"
					:class="{'current': categoryIiIndex === index}">
					{{ item.name }}
				</view>
			</view>
			<view class="right-wrapper" :style="{'height':contentHeight + 'px'}">
				<mescroll-uni height="100%" bottom="370" @init="mescrollInit" @down="refresh" @up="upCallback"
					:up="upOption" :down="downOption">
					<view class="item" v-for="(item,index) in list" :key="index">
						<productItem @statusChange="statusChange" :source="item"></productItem>
					</view>
				</mescroll-uni>
			</view>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import productItem from '@/subPage_product/productItem.vue'

	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				menuButtonInfo: {},
				topHeight: 40,
				contentHeight: 1000,
				categoryiIndex: 0,
				categoryIiIndex: 0,
				list: [],
				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: false,
					page: {
						size: 10 // 每页数据的数量,默认10 
					},
					noMoreSize: 3, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '~ 空空如也 ~',
						icon: 'https://sm.hobon.cc/static/hobon_nogoods.png',
						fixed: true,
						top: '200upx',
					},
					textNoMore: '没有更多啦',
				},
				keywords: '',
				pageNum: 1,
				pageSize: 10,
				productItem: {},
				visible: false,
				categoryList: [],
				categoryScrollLeft: 0,
				categoryIiList: [], //二级品类
				productLabelId: ''
			}
		},
		onLoad(option) {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.topHeight = this.menuButtonInfo.top + this.menuButtonInfo.height + 10;
			this.contentHeight = uni.getSystemInfoSync().windowHeight - uni.upx2px(200) - this.topHeight;
			this.setCategory()
		},
		onShow() {
			// if (uni.getStorageSync('categoryiIndex') || uni.getStorageSync('categoryiIndex') === 0) {
			// 	this.selectCategoryi(uni.getStorageSync('categoryiIndex'))
			// 	uni.setStorageSync('categoryiIndex', '')
			// } else {
			// 	const cartData = this.$store.state.cartData;
			// 	this.list.forEach(item => {
			// 		cartData.forEach(items => {
			// 			if (items.id === item.id) {
			// 				item.number = items.number;
			// 			}
			// 		})
			// 	})
			// }
			// if (this.token && this.cartNumber > 0) {
			// 	uni.setTabBarBadge({
			// 		index: 2,
			// 		text: this.cartNumber + ''
			// 	})
			// } else {
			// 	uni.removeTabBarBadge({
			// 		index: 2
			// 	})
			// }
		},
		computed: {
			token() {
				return this.$store.state.token
			},
			// categoryList() {
			// 	return this.$store.state.category
			// },
			cartNumber() {
				return this.$store.state.cartNumber
			},
			userInfo() {
				return this.$store.state.userInfo;
			}
		},
		methods: {
			async setCategory() {
				const data = await this.$api.post('/app/frontcategory/anonymous/listNoPage', {
					level: 1,
					supplyWarehouseId: '494841976588337152',
					status: 1
				}, false)
				if (data.code !== 200) return
				data.data.sort((a, b) => a.orderNumber - b.orderNumber)
				this.categoryList = data.data;
				this.selectCategoryi(0)
			},
			async selectCategoryi(index) {
				const item = this.categoryList[index];
				this.productLabelId = item.productLabelId;
				this.categoryiIndex = index;
				let m = Math.random();
				this.categoryScrollLeft = uni.upx2px(140) * index - uni.upx2px(280);
				const data = await this.$api.post('/app/frontcategory/anonymous/listNoPage', {
					parentId: item.id,
					level: 2,
					supplyWarehouseId: '494841976588337152',
					status: 1
				})
				if (data.code === 200) {
					data.data.sort((a, b) => a.orderNumber - b.orderNumber)
					this.categoryIiList = data.data;
					if (this.categoryIiList.length) {
						this.selectCategoryIi(0)
					} else {
						this.list = [];
						this.mescroll.endSuccess(0, false)
					}
				}
			},
			selectCategoryIi(index) {
				this.categoryIiIndex = index;
				this.refresh()
			},
			async statusChange(value, id) {
				const index = this.list.findIndex(item => item.id === id)
				this.list[index].show = value;
				let shieldProduct = this.userInfo.cityPointInfo.shieldProduct;
				if (shieldProduct) {
					shieldProduct = shieldProduct.split(',')
				}
				if (value) {
					shieldProduct = shieldProduct.filter(item => item !== id)
				} else {
					shieldProduct.push(id)
				}
				const data = await this.$api.put('/app/pickuppoint', {
					shieldProduct: shieldProduct.join(),
					id: this.userInfo.pickupPointId
				}, false)
				uni.showToast({
					title: value ? '已展示' : '已屏蔽'
				})
				this.$store.commit('setUserInfo')
			},
			refresh() {
				this.$nextTick(() => {
					this.mescroll.resetUpScroll()
				})
			},
			async upCallback(page) {
				const item = this.categoryIiList[this.categoryIiIndex];
				const categoryIiIds = item.mapCategoryList.map(row => {
					return row.categoryIiId
				});
				if (!categoryIiIds.length) {
					categoryIiIds.push(-1)
				}
				this.pageNum = page.num;
				const params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					categoryIiIds: categoryIiIds,
					labelIds: this.productLabelId ? this.productLabelId.split(',') : null,
					// categoryId: item.parentId,
					// categoryIiId: item.id,
					nameKeyWord: this.keywords,
					orders: [{
						"asc": true,
						"column": "id"
					}],
				};
				const data = await this.$api.post("/app/product/anonymous/clientList", params, false)
				if (data.code === 200) {
					this.isLoading = false;
					if (this.pageNum === 1) {
						this.list = [];
					}
					data.data.records.forEach(item => {
						item.productImage =
							"https://cdpresources.hobon.cc/supplier-mini-program/static/noProduct.png";
						if (item.mainImageVideo) {
							const mainImageVideo = JSON.parse(item.mainImageVideo)[0]
							if (mainImageVideo.type === 0) {
								item.productImage = mainImageVideo.url + '?imageView2/3/w/300/q/100'
							} else {
								item.productImage = mainImageVideo.url + '?vframe/jpg/offset/1'
							}
						}
						item.inventory = item.supply - item.sold;
						item.show = true;
						item.inventory = item.supply - item.sold;
						item.labelList.sort((a, b) => a.sortNum - b.sortNum)
						item.labelList.forEach(row => {
							if (!item.labelImage && row.labelImage) {
								item.labelImage = row.labelImage;
							}
						})
						item.salesVolume = parseInt(item.initialVolume || 0) + parseInt(item.realVolume ||
							0)
						let shieldProduct = this.userInfo.cityPointInfo.shieldProduct;
						if (shieldProduct) {
							item.show = shieldProduct.indexOf(item.id) === -1
						}
					})
					console.log("data.data.records", data.data.records)
					this.list = this.list.concat(data.data.records);
					this.mescroll.endBySize(data.data.records.length, data.data.total);
				} else {
					this.mescroll.endErr();
				}
			},
			goBack() {
				uni.navigateBack()
			},
			goSearch() {
				uni.navigateTo({
					url: '/subPage_product/search'
				})
			},
		},
		components: {
			productItem
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		height: 100%;
		overflow: hidden;

		.top-wrapper {
			background-color: #F26022;
			overflow: hidden;
			padding: 0 26upx 0 16rpx;
			display: flex;

			.back-wrapper {
				margin-right: 10rpx;
				display: flex;
				align-items: center;
			}

			.search-wrapper {
				flex: 1;
				position: relative;
				background-color: #fff;
				height: 70upx;
				border-radius: 38upx;
				margin: 30upx 0 24upx 0;
				padding: 0 30upx;
				display: flex;
				align-items: center;

				.input {
					height: 100%;
					flex: 1;
					font-size: 28upx;
				}

				.icon {
					width: 26upx;
					height: 25upx;
				}
			}

			.menuButtonInfo {
				height: 100%;
				margin-left: 10upx;
			}
		}

		.categoryi-wrapper {
			display: flex;
			align-items: center;
			background-color: #fff;
			height: 200upx;
			padding: 0 20upx;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				min-width: 140upx;

				.icon {
					width: 108upx;
					height: 108upx;
					border: 4upx solid #fff;
					border-radius: 45upx;
				}

				.name {
					font-size: 26upx;
					padding: 2upx 15upx;
					border-radius: 20upx;
					background-color: #fff;
					color: #525750;
					margin-top: 10upx;
				}

				&.current {
					.icon {
						border-color: #F26022;
					}

					.name {
						color: #fff;
						background-color: #F26022;
					}
				}
			}
		}

		.content-wrapper {
			display: flex;
			border-top: 2upx solid #F2F2F2;

			.left-wrapper {
				width: 185upx;
				background-color: #F5F9F8;
				overflow: auto;

				.item {
					height: 105upx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-left: 10rpx solid #F5F9F8;
					font-size: 28upx;
					color: #3B3B3B;
					text-align: center;

					&.current {
						border-color: #F26022;
						font-size: 32upx;
						background: linear-gradient(90deg, #F2602233 0%, #F2602209 100%);
					}
				}
			}

			.right-wrapper {
				flex: 1;
				background-color: #ffffff;
			}
		}
	}
</style>